<#escape x as x?html>
<!DOCTYPE html>
<html ng-app="mainApp">
    <@y.htmlHead/>
<body class="bg-default">
<div class="row">
    <input id="userType" value="${userType!''}" hidden>
    <input id="dbConfigId" value="${dbConfigId!''}" hidden>
    <input id="dvNodeId" value="${dvNodeId!''}" hidden>
    <div class="col-md-3 col-lg-3"
         style="height:45px;background-color: #4b5d6e;font-size: 16px;padding:10px 0px;cursor:pointer;">
        <div style="padding-left: 15px;text-align: center;color:#ebf1f7;" onclick="load($('#crumbs span').first(),'/dashboard/welcome')">
            <img src="${assetsPath}/img/logo.png"/>
        </div>
    </div>
    <div class="col-md-9 col-lg-9" style="height:45px;background-color: #3c84b5">
        <div id="crumbs" style="float:left;line-height: 45px;margin-left: 15px;color:#80cbff"><span
                style="cursor: pointer; color:white"
                onclick="load(this)" url="/dashboard/welcome">首页</span>
        </div>
        <div class="navbar-custom-menu navbar-custom-menu-fusion">
            <ul class="nav navbar-nav pull-right">
                <input type="text" class="hide"
                       id="currentClusterId" value="${clusterId!}">

                <#if dataNodeManager?? && !dataNodeManager>
                    <li class="dropdown messages-menu">
                        <a href="#" targetId="myApply" title="我的申请" class="dv">
                            <img src="${assetsPath}/img/my_apply.png"/>
                            <span id="applyNumSpan" class="label label-success"
                                  style="position: absolute;right: 7px;text-align: center;padding: 2px 3px;line-height: 0.9;font-size: 10px;top: 9px;border-radius: .25em;">${applyNum!0}</span>
                        </a>
                    </li>

                    <li class="dropdown notifications-menu">
                        <a href="#" targetId="myDemand" title="我的需求" class="dv">
                            <img src="${assetsPath}/img/my_demand.png"/>
                            <span id="demandNumSpan" class="label label-info"
                                  style="position: absolute;right: 5px;text-align: center;padding: 2px 3px;line-height: 0.9;font-size: 10px;top: 9px;border-radius: .25em;">${demandNum!0}</span>
                        </a>
                    </li>

                    <li class="dropdown notifications-menu">
                        <a href="#" targetId="notice" title="通知" class="dv">
                            <img src="${assetsPath}/img/my_notify.png"/>
                            <span id="notifyNumSpan" class="label label-warning"
                                  style="position: absolute;right: 5px;text-align: center;padding: 2px 3px;line-height: 0.9;font-size: 10px;top: 9px;border-radius: .25em;">${notifyNum!0}</span>
                        </a>
                    </li>
                </#if>


                <#if dataNodeManager?? && dataNodeManager>
                    <li class="dropdown notifications-menu">
                        <a href="#" targetId="dvResNodeApply/wait" title="我的审批" class="dv">
                            <img src="${assetsPath}/img/todoServiceApply.png"/>
                            <span id="replyNumSpan" class="label label-danger"
                                  style="position: absolute;right: 5px;text-align: center;padding: 2px 3px;line-height: 0.9;font-size: 10px;top: 9px;border-radius: .25em;">${replyNum!0}</span>
                        </a>
                    </li>
                </#if>

                <li>
                    <div id="${user.id!''}" href="#" class="user-name-label" style="position: relative;display:
                        block;padding: 10px 15px;padding-top: 15px;padding-bottom: 15px;line-height: 20px;color: white;">
                        <span class="fa fa-user" style="margin-right: 8px"></span>${(user.name)!}
                        </a>
                        <ul class="dropdown-menu pull-right" role="menu"
                            style="min-width: 110px;background-color: #4b5d6e;">
                            <div style="width: auto; height: 20px;"
                                 class="slimScrollDiv">
                                <ul style="margin-left: 15px;padding:0;float:left;overflow: hidden; width: 100%; height: 20px;">
                                    <li>
                                        <a href="/logout" style="color: #FCFFFF;font-weight: 600">
                                            <i class="fa fa-sign-out"
                                               style="margin-right: 10px"></i><@s.message "index.user.logout"/>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </ul>
                    </div>
                </li>
                <li>
                    <a id="${user.id}" class="fa fa-cog dropdown-action" href="#" style="cursor: hand"
                       data-toggle="dropdown"></a>
                    <ul class="dropdown-user-menu dropdown-menu pull-right" style="width: 400px;padding: 0 0;">
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="row" style="background-color: #adc4d4;">
    <div class="col-md-3 col-lg-3" style="background-color: #adc4d4; padding: 10px 15px 10px 30px;" valign="top">
        <div class="input-group input-group-sm" style="width: 100%">
            <div class="has-feedback">
                <input id="search" type="text" class="form-control" onkeyup="reloadTree(event)"
                       placeholder="搜索...">
                <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span>
            </div>
        </div>
        <div id="treeBox"
             style="min-height: 700px;width:100%;background-color: #ebf1f7;margin-top: 13px;padding:5px 20px 50px 20px">
            <ul id="menuTree" class="ztree"></ul>
        </div>
    </div>
    <div class="col-md-9 col-lg-9" valign="top" style="background-color: #EBF1F7;">
        <div class="content" style="min-height: 400px;background-color: #EBF1F7;"></div>
    </div>
</div>
<div class="row" style="background-color: #adc4d4;border-bottom-width: 5px; border-bottom-style: solid;">
    <div class="col-md-3 col-lg-3" style="background-color: #adc4d4; padding:10px 15px" valign="top">
    </div>
    <div class="col-md-9 col-lg-9" style="padding-left: 0px; padding-right: 0px;">
        <div class="main-footer">
            <@y.htmlCopyright></@y.htmlCopyright>
        </div>
    </div>
</div>
    <@y.htmlModal id="messageModal"/>
</body>
<style>
    .nav > li > a:hover {
        background: #5A9DCA;
    }
</style>
<script>
    var config = {
        paths: {
            app: "assets/modules/core/js/app",
            menu: "assets/modules/core/js/menu"
        },
        shim: {
            app: {
                deps: ['jQuery'],
                exports: 'app'
            }
        }
    };

    var currentUrl;

    function load(node, url) {
        url = url || $(node).attr("url");
        if (node) {
            $(node).css("color", "white");
            $(node).nextAll().detach();
        }
        if (url && url != currentUrl) {
            currentUrl = url;
            context.call([
                "core"
            ], function (core) {
                core.enableShowLoading();
                core.loadContent(url, function (data) {
                    var scope = core.globalData("scope");
                    core.clearTimer();
                    if (scope) {
                        scope.$destroy && scope.$destroy();
                    }

                    var $injector = angular.injector(['ng']);
                    $injector.invoke(function ($compile, $rootScope, $sce) {
                        scope = $rootScope.$new();
                        scope.$sce = $sce;
                        $compile($("div .main")[0])(scope);
                        scope.$apply();
                        core.globalData("scope", scope);
                    });
                    return data;
                });
            });
        }
    }

    var setting = {
        view: {
            showLine: false,
            showIcon: false,
            selectedMulti: false,
            dblClickExpand: true,
            showTitle: false,
            addDiyDom: addDiyDom
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: zTreeOnClick,
            beforeCollapse: function (treeId, treeNode) {
                $("#mCSB_1_container").css("width", "100%");
            }
        }
    };

    function addDiyDom(treeId, treeNode) {
        var spaceWidth = 25;
        var switchObj = $("#" + treeNode.tId + "_switch");
        var icoObj = $("#" + treeNode.tId + "_ico");
        var spanObj = $("#" + treeNode.tId + "_span");
        switchObj.remove();
        spanObj.after(switchObj);
        spanObj.before("<img src='${assetsPath}/img/tree/" + treeNode.nodeType + ".png' style='margin-right:5px'/>");

        if (treeNode.level > 0) {
            var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
            icoObj.before(spaceStr);
        }
    }

    function zTreeOnClick(event, treeId, treeNode) {
        var url = treeNode.dest;
        setTimeout(function () {
            load(null, url);
        }, 1);
        var arr = [];
        do {
            arr.push(treeNode);
            treeNode = treeNode.getParentNode();
        } while (treeNode);
        arr.reverse();
        $("#crumbs").empty();
        var userType = $("#userType").val();
        if (userType == "nodeManager") {
            $("#crumbs").append("<span style='cursor:pointer' onclick='load(this)' " +
                    "url='/console/datanode/dvNodeInfo?dbConfigId=${dbConfigId!}&dvNodeId=${dvNodeId!}'>首页</span>");
        } else {
            $("#crumbs").append("<span style='cursor:pointer' onclick='load(this)' " +
                    "url='/dashboard/welcome'>首页</span>");
        }
        for (i in arr) {
            if (i == 'peek') {
                continue;
            }
            $("#crumbs").append("<img src='${assetsPath}/img/split.png'/>");
            $("#crumbs").append("<span style='cursor:pointer" + (i == arr.length - 1 ? ";color:white" : "") +
                    "' onclick='load(this)' url='" + arr[i].dest + "' data-node-type='" + arr[i].nodeType + "'>" +
                    arr[i].name + "</span>");
        }

        $('#crumbs').find('span').each(function () {
            var $el = $(this);
            $el.data('textName',$el.text());
            $el.data('shortName',$el.text().substring(0,2));
            $el.text($el.data('shortName'));
            $el.mouseover(function () {
                $el.text($el.data('textName'));
            });
            $el.mouseout(function () {
                $el.text($el.data('shortName'));
            });
        });
    }

    function reloadTree(e) {
        if (e.keyCode == 13 || e.keyCode == 10) {
            $.get("${contextPath}/user-index/get-menu-tree?key=" + encodeURI(encodeURI($("#search").val())), function (data) {
                var treeObj = $("#menuTree");
                $.fn.zTree.init(treeObj, setting, data);
            });
        }
    }

    context.call(config, [
        "jQuery",
        "bootstrap",
        "app",
        "core",
        "ztree",
        "malihu"
    ], function (jQuery, bootstrap, app, core) {
        // Init skin
        var userType = $("#userType").val();
        if (userType == "nodeManager") {
            core.loadContent("/console/datanode/dvNodeInfo?dbConfigId=" + $("#dbConfigId").val() + "&dvNodeId=" + $("#dvNodeId").val());
        } else {
            core.loadContent("/dashboard/welcome");
        }
        $(".content").css("min-height", $(window).height() - 101);
        $("#treeBox").css("max-height", $(window).height() - 180);
        $(window).resize(function () {
            $(".content").css("min-height", $(window).height() - 101);
            $("#treeBox").css("max-height", $(window).height() - 180);
        });
        $("#treeBox").mCustomScrollbar({
            axis: "yx",
            scrollbarPosition: "inside",
            scrollInertia: 100,
            theme: "minimal-dark"
        });
        $.get("${contextPath}/user-index/get-menu-tree", function (data) {
            var treeObj = $("#menuTree");
            $.fn.zTree.init(treeObj, setting, data);

            var menuTree = $.fn.zTree.getZTreeObj("menuTree");
            var nodes = menuTree.getNodes();

            nodes.forEach(function (node) {
                var nodeId = node.id;
                var nodeTId = node.tId;
                var switchId = nodeTId + "_switch";
                if ("myApply" == nodeId) {
                    $("#" + switchId).remove();
                    $("#" + nodeTId).children().append("<small class='label bg-green' style='right: 10px;position: absolute;margin-top: 8px;font-weight: normal; font-size: 12px; padding: 2px 7px 2px 7px;'>" + $("#applyNumSpan").text() + "</small>");
                }
                if ("notice" == nodeId) {
                    $("#" + switchId).remove();
                    $("#" + nodeTId).children().append("<small class='label bg-yellow' style='right: 10px;position: absolute;margin-top: 8px;font-weight: normal; font-size: 12px; padding: 2px 7px 2px 7px;'>" + $("#notifyNumSpan").text() + "</small>");
                }
                if ("dvResNodeApply" == nodeId) {
                    var children = node.children;
                    children.forEach(function (child) {
                        if ("dvResNodeApply/wait" == child.id) {
                            var nodeTId = child.tId;
                            var switchId = nodeTId + "_switch";
                            $("#" + switchId).remove();
                            $("#" + nodeTId).children().append("<small class='label bg-red' style='right: 10px;position: absolute;margin-top: 8px;font-weight: normal; font-size: 12px; padding: 2px 7px 2px 7px;'>" + $("#replyNumSpan").text() + "</small>");
                        }
                    });


                }
                if ("myDemand" == nodeId) {
                    $("#" + switchId).remove();
                    $("#" + nodeTId).children().append("<small class='label' style='right: 10px;position: absolute;margin-top: 8px;background-color:#00C0EF; font-weight: normal; font-size: 12px; padding: 2px 7px 2px 7px;'>" + $("#demandNumSpan").text() + "</small>");
                }
            });


            treeObj.hover(function () {
                if (!treeObj.hasClass("showIcon")) {
                    treeObj.addClass("showIcon");
                }
            }, function () {
                treeObj.removeClass("showIcon");
            });
        });
    });

    context.call(config, ['userIndex'], function (userIndex) {
        userIndex.init();
    });

    var mainApp = angular.module('mainApp', ['ngSanitize']);
    define("mainApp", [], function () {
        return mainApp;
    });
</script>
<link rel="stylesheet" href="${modulesPath}/user/user.css">
</html>
</#escape>